<h3>Small size table</h3>
<lv-datatable [lvData]="data" #lvSmallTable lvSize="small">
  <thead>
    <tr>
      <th *ngFor="let col of columns; let index = index" [lvCellKey]="col.key" [width]="col.width">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvSmallTable.renderData">
      <tr>
        <td *ngFor="let col of columns; let index = index">{{ item[col.key] }}</td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<h3>Middle size table</h3>
<lv-datatable [lvData]="data" #lvMiddleTable>
  <thead>
    <tr>
      <th *ngFor="let col of columns; let index = index" [lvCellKey]="col.key" [width]="col.width">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvMiddleTable.renderData">
      <tr>
        <td *ngFor="let col of columns; let index = index">{{ item[col.key] }}</td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>

<h3>Large size table</h3>
<lv-datatable [lvData]="data" #lvLargeTable lvSize="large">
  <thead>
    <tr>
      <th *ngFor="let col of columns; let index = index" [lvCellKey]="col.key" [width]="col.width">{{ col.label }}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let item of lvLargeTable.renderData">
      <tr>
        <td *ngFor="let col of columns; let index = index">
          <div *ngIf="col.key === 'storage'">
            <p>{{ item[col.key] }}</p>
            <p>{{ item['port'] }}</p>
          </div>
          <span *ngIf="col.key !== 'storage'">{{ item[col.key] }}</span>
        </td>
      </tr>
    </ng-container>
  </tbody>
</lv-datatable>
